<!DOCTYPE html>
<html>

<head>
    <title>BLC中挪项目</title>
    
    <!-- meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- css -->
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="css/pace.css">
    <link rel="stylesheet" href="css/custom.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/progress.css">
    <link rel="stylesheet" href="css/flex-list.css">



    <!-- js -->
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/pace.min.js"></script>
    <script src="js/modernizr.custom.js"></script>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    <style>
        p {
            text-indent: 40px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <header id="site-header">
                <div class="row">
                    <div class="col-md-6 col-sm-7 col-xs-8">
                        <div class="logo">
                            <a href="index.html">
                                <img class="my-logo" src="./img/logo.png" />
                            </a>
                            <div class="title">中挪联合面向供应链的高性能区块链系统支撑平台关键技术研究</div>
                        </div>
                    </div><!-- col-md-4 -->
                    <div class="col-md-6 col-sm-5 col-xs-4">
                        <nav class="main-nav" role="navigation">
                            <div class="navbar-header">
                                <button type="button" id="trigger-overlay" class="navbar-toggle">
                                    <span class="ion-navicon"></span>
                                </button>
                            </div>

                            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                <ul class="nav navbar-nav navbar-right">
                                    <li class="cl-effect-11"><a href="index.html" data-hover="首页">首页</a></li>
                                    <li class="cl-effect-11"><a href="submission1.html" data-hover="进展">进展</a></li>
                                    <li class="cl-effect-11"><a href="publications.html" data-hover="成果">成果</a></li>
                                    <li class="cl-effect-11"><a href="events.html" data-hover="活动">活动</a></li>
                                    <li class="cl-effect-11"><a href="about.html" data-hover="原型">原型</a></li>
                                </ul>
                            </div>
                        </nav>
                    </div>
                </div>
            </header>
        </div>
        <div class="content-body">
            <div class="container">
                <div class="row">
                    <main class="col-md-12">
                        <div class="list-container">
                            <div class="flex-item" v-for="item,index in events" :key="index">
                                <div class="poster">
                                    <img :src="item.path" />
                                </div>
                                <a :href="item.ref">
                                    <div class="my-content">
                                        <h3 class="my-title">
                                            {{item.title}}
                                        </h3>
                                        
                                        <div class="my-meta">
                                            <span class="iconfont icon-shijian"></span>
                                            <span class="my-time">{{item.time}}</span>
                                        </div>
                                        <p class="my-info">
                                            {{item.info}}
                                        </p>
                                    </div>
                                </a>
                                
                            </div>
                        </div>
                    </main>
                </div>
            </div>
        </div>

        <footer id="site-footer">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <p class="copyright">&copy 2022 - 中挪联合面向供应链的高性能区块链系统支撑平台关键技术研究
                        </p>
                    </div>
                </div>
            </div>
        </footer>

        <!-- Mobile Menu -->
        <div class="overlay overlay-hugeinc">
            <button type="button" class="overlay-close"><span class="ion-ios-close-empty"></span></button>
            <nav>
                <ul>
                    <li><a href="index.html" data-hover="首页">首页</a></li>
                    <li><a href="progress.html" data-hover="进展">进展</a></li>
                    <li><a href="publications.html" data-hover="成果">成果</a></li>
                    <li><a href="events.html" data-hover="活动">活动</a></li>
                    <li><a href="about.html" data-hover="关于">原型展示</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <script src="js/script.js"></script>

</body>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            events: [
                {
                    // title: '中方第一阶段项目总结会',
                    time: '2021-01-08',
                    info: '第一阶段项目总结会议',
                    ref: 'event1.html',
                    path: './img/event1.JPG'
                },
                {
                    // title: '测试标题2',
                    time: '2021-07-06',
                    info: '第二阶段项目总结会议',
                    ref: 'event2.html',
                    path: './img/event2.JPG'
                },
                {
                    // title: '测试标题4',
                    time: '2022-01-13',
                    info: '中期及第三阶段项目总结会议',
                    ref: 'event3.html',
                    path: './img/event4.JPG'
                }
            ]
        }
    });
</script>

</html>